import React from 'react'
import TextField from '@material-ui/core/TextField'
import PropTypes from 'prop-types'

const PROPS_BLACKLIST = [
    'onChange',
    'value'
];

const cleanProps = (props) => {
    PROPS_BLACKLIST.forEach(field => delete props[field]);
    return props;
};

class LetterTextField extends  React.Component {
    state = {
        value: ""
    }

    handleTextChange = event => {
        const value = event.currentTarget.value
        const result = this.check(value)
        this.props.onChange(value, result)
    }

    check = (value) => {
        //只能是英文字母和数字
        const reg=/^[0-9a-zA-Z]*$/;
        if(!reg.test(value)){ //正则验证不通过，格式不对
            return false;
        }else{
            return true;
        }
    }
    render(){
        const { ...props } = this.props;
        const { value } = this.state
        cleanProps(props);

        return (
            <TextField {...props}
                       onChange={this.handleTextChange}
                       value={value}>
            </TextField>
        )
    }
}

LetterTextField.propTypes = {
    onChange: PropTypes.func
}

export default LetterTextField